<template>
  <div class="tabs">
    <el-tag v-for="(tag,index) in tags"
            :key="tag.name"
            size="medium"
            :closable = "tag.name != 'Home'"
            :effect="$route.name === tag.name ? 'dark' : 'plain'"
            @click="changeMenu(tag)"
            @close="handleClose(tag,index)">
      {{tag.label}}
    </el-tag>
  </div>
</template>

<script>
  import {mapState,mapMutations} from 'vuex'
    export default {
        name: "CommonTag",
        // 组件可以重复使用，当一个组件使用多次，就会多次访问一个data数据，从而类似共享复用。如果组件的data属性不是一个函数且返回一个对象，在这种一个组件多次使用的情况下就会共享一个数据。
        data() {
            return {}
        },
        methods:{
            ...mapMutations({
                // 在当前页面调用vuex中的closeTag
                closeTag: 'closeTag'
            }),
            changeMenu(tag){
                console.log(tag)
                // push方法其实和<router-link :to="...">是等同的。
                this.$router.push({name: tag.name})
            },
            handleClose(tag,index){
                console.log(tag,index)
                const length = this.tags.length - 1;
                // 等同于 this.$store.commit("closeTag",tag.name);
                this.closeTag(tag);
                // tag.name 与 当前 路由的name进行比较
                if (tag.name !== this.$route.name) {
                    return;
                }
                if (index === length) {
                    this.$router.push({
                        name: this.tags[index - 1].name
                    });
                } else {
                    this.$router.push({
                        name: this.tags[index].name
                    });
                }
            }
        },
        computed: {
            ...mapState({
                tags: status => status.tab.tabsList
            })
        }
    }
</script>

<style lang="less" scoped>
.tabs{
  padding-top: 20px;
  .el-tag {
    margin-right: 15px;
    // 小手显示
    cursor: pointer;
  }
}
</style>